<template>
  <div class="UpdateH">
    <el-form ref="form" :model="artist" :rules="rules" label-width="120px" style="width: 700px">
      <el-form-item label="图片" prop="icon">
        <el-upload class="avatar-uploader" :action="`http://47.94.203.104:9000/upload`" :show-file-list="false"
          :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <img v-if="artist.icon" :src="artist.icon" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="姓名" prop="p_names">
        <el-input v-model="artist.p_names" placeholder="请输入艺术家姓名"></el-input>
      </el-form-item>
      <el-form-item label="生-死" prop="age">
        <el-input v-model="artist.age" placeholder="请输入生-死"></el-input>
      </el-form-item>
      <el-form-item label="字" prop="deil">
        <el-input v-model="artist.deil" placeholder="请输入艺术家字"></el-input>
      </el-form-item>
      <el-form-item label="朝代" prop="dynasty">
        <el-input v-model="artist.dynasty" placeholder="请输入朝代"></el-input>
      </el-form-item>
      <el-form-item label="介绍" prop="count">
        <el-input clearable type="textarea" autosize v-model="artist.count" placeholder="请输入艺术家介绍"></el-input>
      </el-form-item>
      <el-form-item label="首字母" prop="pinying">
        <el-input v-model="artist.pinying" placeholder="请输入艺术家姓名首字母"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="Update">提交修改</el-button>
        <el-button @click="$refs.form.resetFields()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import httpApi from '@/http/index';
export default {
  data() {
    return {
      artist: {
        p_id: this.$route.params.id,//获取每行的p_id 
        p_names: "",
        age: "",
        icon: "",
        deil: "",
        dynasty: "",
        count: "",
        pinying: "",
      },
      rules: {
        icon: [{ required: true, message: '必填', trigger: 'blur' }],
        p_names: [{ required: true, message: '必填', trigger: 'blur' }],
        age: [{ required: true, message: '必填', trigger: 'blur' }],
        deil: [{ required: true, message: '必填', trigger: 'blur' }],
        dynasty: [{ required: true, message: '必填', trigger: 'blur' }],
        count: [{ required: true, message: '必填', trigger: 'blur' }],
        pinying: [{ required: true, message: '必填', trigger: 'blur' }],
      }
    }
  },
  methods: {
    /** 上传成功后执行 */
    handleAvatarSuccess(res, file) {
      console.log(res)
      //   this.form.actorAvatar = res.data
    },
    /** 上传文件的格式 / 大小验证 */
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    Update() {
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log(this.artist);
          httpApi.artist.updateArtist(this.artist).then(res => {
            // console.log(res);
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.$router.push('/home/yishujia')
          })
        }
      })
    }
  },
  mounted() {
    // console.log(this.artist.p_id);
    let params = { id: this.artist.p_id }
    httpApi.artist.queryById(params).then((res) => {
      console.log("获取成功,结果：",res);
      this.artist = res.data.data.obj;
    })
  }
}
</script>

<style lang="scss" scoped>
.avatar-uploader {
  ::v-deep .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  line-height: 128px;
  text-align: center;
}

.avatar {
  width: 128px;
  display: block;
}
.UpdateH{
  height:600px;
  overflow: scroll;
}
</style>